<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <div class="main">
        <div class="search-box clearfix">
          <ul>
            <li><span style="padding-right:20px;">农产品溯源</span></li>
            <li>
              <input
                type="text"
                placeholder="请输入产品编号"
                class="fl"
                v-model="materialId"
              />
            </li>
            <li><p @click="search()">搜索</p></li>
          </ul>
        </div>
        <div class="search-box1">
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs1.png"></li>
            <li style="font-size:16px;">真源码溯源云</li>
            <li>溯源云扶贫平台，从源头保障产品的安全，让消费者更放心</li>
          </ul>
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs2.png"></li>
            <li style="font-size:16px;">智慧农业物联网</li>
            <li>支持按需添加物联网模块：温度、海拔、湿度、风力、水质、土然、灌溉水源流量、水位等物联网模块支持自定义添加。</li>
          </ul>
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs3.png"></li>
            <li style="font-size:16px;">源头直播摄像机</li>
            <li>自主研发，是安防监控也是网红农货营销工具打开手机，随时看基地以及顾客访问记录顾客留言。客户看得见的真源头直播。支持24小时直播，真实货源看得见。支持分享摄像机画面给亲人给客户。</li>
          </ul>
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs4.png"></li>
            <li style="font-size:16px;">地块管理</li>
            <li>采用最先进的深度学习技术，在高分辨率遥感影像上，根据耕地的纹理、种类等特征，实时地确定地块位置、识别地块分界、测算地块和种植面积，并在云端存储。</li>
          </ul>
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs5.png"></li>
            <li style="font-size:16px;">农业大数据</li>
            <li>智慧农业大数据平台高效的将自然环境数据与种植数据根据季节和生长周期进行融合计算。</li>
          </ul>
          <ul>
            <li><img width="50" height="50" src="../../assets/img/zs6.png"></li>
            <li style="font-size:16px;">防串货</li>
            <li>对产品的流通进行有效的监管，帮助厂家进行销售区域的管理和跟踪查看。</li>
          </ul>
        </div>
        <div
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      materialId: "",
      list: [],
      baseName: "",
      info: {},
      otherInfo: {},
      imgUrl: "",
      checkRepotyList: [],
      loading: false,
      isShow: false,
    };
  },
  methods: {
    // 搜索
    search() {
      if(this.materialId.length == 0){
        this.$message({
          type: "error",
          message: "请输入产品编号"
        });
        return;
      }
      
      let routeData = this.$router.resolve({ path: '/farmProducts/tracingindex', query: {  materialId: this.materialId } });
      window.open(routeData.href, '_blank');
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  min-height: 800px;
  background: #fff;
}
.search-box {
  /* margin-top: 32px; */
  width: 1200px;
  min-height: 250px;
  /* border: 1px solid #dcdcdc; */
  border-right: 0;
  margin-bottom: 15px;
  background-image: url("../../assets/img/ncpsyindex.png");
}
.search-box ul {
  /* width: 100px;
  height: 20px;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;*/
  margin-left: 30%;
  width: 500px;
}
.search-box ul li {
  /* width: 100px;
  height: 20px;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;*/
  margin-top: 110px;
  /* margin-left: 10px; */
  display: inline-block;
  height: 32px;
  vertical-align: middle;
  line-height: 32px;
}
.search-box ul li span{
  font-size: 22px;
  color: white;
}
.search-box input {
  width: 296px;
  border: 0;
  display: inline-block;
  height: 32px;
  vertical-align: middle;
  padding-left: 10px;
}
.search-box  ul li p {
  /* width: 45px;
  height: 30px;
  background: #f48d06;
  border-radius: 2px 0px 0px 2px;
  border: 1px solid #f48d06;

  font-size: 12px;
  line-height: 32px;*/
  height: 30px;
  background: #f48d06;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #f48d06;
  text-align: center;
  color: #fff;
  cursor: pointer; 
  width: 40px;
  display: inline-block;
}
.search-box p:active {
  border: 0;
  background: #ee781b;
}
.search-box1 {
  /* margin-top: 32px; */
  width: 1200px;
  min-height: 550px;
  /* border: 1px solid #dcdcdc; */
  border-right: 0;
  margin-bottom: 15px;
}
.search-box1 ul {
  width: 320px;
  min-height: 170px;
  margin: 50px 10px 10px 50px;
  display:inline-block;
  vertical-align: top;
}
.search-box1 ul li {
  text-align: center;
  padding: 5px;
}
.search-box1 ul li:last-child {
  color:#9B9B9B;
  height: 90px;
  line-height: 25px;
  font-size: 14px;
}
.goods-pic {
  width: 271px;
  height: 271px;
}
.checkRepoty-pic {
  width: 100px;
  float:left;
  height: 100px;
  margin: 10px 10px;
}
.goods-list {
  float: left;
  width: 273px;
  min-height: 300px;
  margin-right: 10px;
}
.goods-list:nth-child(3) {
  margin-right: 0;
}
.goods-list ul li {
  line-height: 30px;
}
.goods-list ul li span {
  color: #277430;
  font-size: 12px;
  float: left;
}
.goods-list ul li:nth-child(1) span {
  font-size: 14px;
}
.goods-list ul li::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.goods-list ul li img {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.goods-list ul li strong {
  font-size: 14px;
  color: #ee781b;
  cursor: pointer;
}
.goods-list ul li span:nth-child(1) {
  width: 70px;
  float: left;
}
.goods-list ul li span:nth-child(2) {
  width: 200px;
  float: left;
}
.goods-name {
  font-size: 16px;
  color: #4a4a4a;
  padding-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.main {
  width: 1200px;
  min-height: 250px;
  margin: 0 auto;
}
.flow-list span {
  display: block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #c1c1c1;
  position: absolute;
  left: -3.5px;
  top: 6px;
}
.flow-list {
  position: relative;
  padding-bottom: 40px;
}
.flow-list p.name {
  width: 250px;
  font-size: 12px;
  color: #277430;
  margin-left: 15px;
}
.flow-list .line {
  position: absolute;
  height: 100%;
  width: 1px;
  background: #c1c1c1;
  left: 0;
  top: 10px;
}
.no-data {
  text-align: center;
  margin-top: 60px;
}
.no-data p {
  font-size: 14px;
  color: #666;
  position: relative;
  top: -40px;
}
</style>
